<template>
   <div class="main">
      <div class="main-content">
        <div class="container-fluid">
          <div class="headarea">
            <div class="headarea-1">
                <span>药品分类：</span>
                        <el-select v-model="value" placeholder="全部">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                                :disabled="item.disabled" />
                        </el-select>
              <span>日期：</span>
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="——"
                start-placeholder=""
                end-placeholder=""
                :size="size"
              />
              
            </div>
            <el-button class="btn" type="primary">查询</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="ftc">
      <div>
        <div class="blueBg2 ">
          <div class="flh70 ">收支概况</div>
          <div class="flh34">
            <div class="all_profit">0.00</div>
            <div class="bwt">总利润</div>
          </div>
          <div class="flh34 l mr60">
            <div class="all_trade_total_amount">0.00</div>
            <div class="bwt">批发总价</div>
          </div>
          <div class="flh34 l mr60">
            <div class="all_trade_total_amount">0.00</div>
            <div class="bwt">销售总价</div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <nav>
        <ul>
          <li :class="btn1" @click="toInventory()">处方药品明细</li>
          <li :class="btn2" @click="toBatch()">处方药品排行</li>
        </ul>
      </nav>
      </div>
      <!-- 下面是否显示 -->
      <vue1 v-if="flag" />
      <vue2 v-if="!flag" />
</template>

<script lang="ts" setup>
import { ref,  } from "vue";
import vue1 from "@/components/sales/1.vue";
  import vue2 from "@/components/sales/2.vue";
  let btn1 = ref("btnOne");
  let btn2 = ref("btnTwo");
  const flag = ref(true);
  
  const toInventory = () => {
    btn1.value = "btnOne";
    btn2.value = "btnTwo";
    flag.value = true;
  };
  const toBatch = () => {
    btn1.value = "btnTwo";
    btn2.value = "btnOne";
    flag.value = false;
  };
const options = [
    {
        value: 'Option1',
        label: '全部',
    },
    {
        value: 'Option2',
        label: '中草药',
    },
    {
        value: 'Option3',
        label: '中成药',
    },
   
    
]
</script>

<style  scoped>
ul {
    display: flex;
    /* justify-content: center; */
    margin: 0;
    padding: 0;
    height: 45;
    list-style: none;
    text-align: center;
  }
  ul li {
    width: 100px;
    height: 44px;
    line-height: 44px;
    background-color: #e5e5e5;
    color: #676a6d;
    
    /* text-decoration: none; */
  }
  .btnOne {
    background-color: #00aaff;
    color: white;
  }
  .btnTwo {
    background-color: #e5e5e5;
    color: #676a6d;
  }
  nav{
    margin-left: 12px;
    margin-top: 20px;
  }
.bwt{
  border-top: 1px solid #fff;
}
.flh34{
  margin-right: 60px!important;
  line-height: 34px;
  float: left;
}
.flh70 {
  margin-right: 60px!important;
  line-height: 70px;
  float: left;
}
.blueBg2{
  padding: 0 10px;
  min-height: 70px;
  background-color: #47c6c6!important;
  margin-left: -4px;
}
.ftc{
  color: #fff!important;
  text-align: center!important;
  /* width: 100%; */
  padding-left: 15px
}



.main-content {
  padding: 28px 10px;
}
/* .container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
} */

.headarea {
  padding: 10px;
  /* margin-bottom: 20px !important; */
  font-family: "sans-serif";
  font-size: 10px;
  color: #676a6d;
  /* margin: 0 0 20px; */
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
}
.headarea-1 {
  position: relative;
  display: inline-block;
  margin-right: 30px !important;
}
.input-1 {
  width: auto;
  display: inline-block;
  /* border-radius: 2px; */
  /* border-color: #eaeaea;
      background-color: #fcfcfc; */
  padding: 6px 12px;
  font-size: 10px;
  /* line-height: 1; */
  color: #555;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

</style>